<template>
	<view>
	<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
		<u-navbar :border-bottom="false" title="积分记录" back-icon-color="#ffffff" :background="{background:'#2149c3'}" title-color="#ffffff"></u-navbar>
		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="(item, index) in dataList" :key="index">
				<view class="content">
					<view class="text-grey">{{item.reason}}</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="margin-left-lg"></text>
							{{item.createTime}}
						</view> </view>
				</view>
				<view class="action">
					<view class="text-lg" :class="item.integralCount<0?'text-red':'text-green'">{{item.integralCount}}</view>
				</view>
			</view>
		</view>
		<view style="padding:20rpx 0;" v-if="dataShow">
			<graceEmpty text="暂无数据" :iconSize="100" :iconType="4" iconColor="#9DD26D" textColor="#9DD26D"></graceEmpty>
		</view>
	</scroll-view>
	</view>
</template>

<script>
var _self;
var page = 1,
	pageSize = 15;
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	import graceEmpty from "@/colorui/components/graceEmpty.vue";
	export default {
		components: {
			graceEmpty
		},
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
	    data() {
	        return {
				id:"",
				dataList: [],
				dataShow: false
	        }
	    },
		onUnload() {
			page = 1;
			this.dataList = [];
		},		
		onLoad: function(e) {
			if(e.id!=null && e.id!=''){
				this.id=e.id;
			}else{
				this.id = this.userInfo.id;
			}
			_self = this;
			page = 1;
			this.getDataList();
		},
		//下拉刷新
		onPullDownRefresh: function() {
			page = 1;
			this.dataList = [];
			this.getDataList();
		},
		// 加载更多
		onReachBottom: function() {
			this.getDataList();
		},
	    methods:{
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
	        getDataList: function() {
	        	var hideload = 0;
	        	uni.showLoading();
	        	uni.request({
	        		url: this.serverUrl + 'app/getIntegralList',
	        		data: {
	        			memberId: this.id,
	        			pageNum: page,
	        			pageSize: pageSize,
	        		},
	        		header: {
	        			"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
	        		},
	        		method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == 0) {
							var pageSum = Math.ceil(r.data.count/pageSize);
							if(pageSum==0){
								this.dataShow = true;
							}else{
								if (page>pageSum) {
									hideload = 1;
									uni.hideLoading();
									uni.showToast({
										title: "没有更多了",
										icon: "none",
										duration: 1500
									}); 
								}else{
									this.dataShow = false;
									for (var i = 0; i < r.data.data.length; i++) {
										this.dataList = this.dataList.concat(r.data.data[i]);
									}
									page++;
								}
							}
						}
					},
					complete: r => {
						if (hideload == 0) {
							uni.hideLoading();
						}
						uni.stopPullDownRefresh();
					}
	        	});
	        }      
		}
	}	
</script>

<style>
	.cu-list.menu-avatar>.cu-item .content {
		left: 30rpx;
	}

</style>
